<template>
  <div>
    <div class="popover-placement-demo">
      <div class="popover-demo">
        <MPopover trigger="hover" placement="top-start" >
          <MButton>top-start</MButton>
          <template #popover >
            <span :style="{color:'hotpink'}">啊啊啊</span>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="top" >
          <MButton>top</MButton>
          <template #popover >
            <span :style="{color:'hotpink'}">啊啊啊</span>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="top-end" >
          <MButton>top-end</MButton>
          <template #popover >
            <span :style="{color:'hotpink'}">啊啊啊</span>
          </template>
        </MPopover>
      </div>
      <div class="popover-demo">
        <MPopover trigger="hover" placement="left-start" >
          <MButton>left-start</MButton>
          <template #popover >
            <p :style="{color:'hotpink'}">啊啊啊</p>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="right-start" >
          <MButton>right-start</MButton>
          <template #popover >
            <span :style="{color:'hotpink'}">啊啊啊</span>
          </template>
        </MPopover>
      </div>
      <div class="popover-demo">
        <MPopover trigger="hover" placement="left" >
          <MButton>left</MButton>
          <template #popover >
            <p :style="{color:'hotpink'}">啊啊啊</p>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="right" >
          <MButton>right</MButton>
          <template #popover >
            <h1 :style="{color:'hotpink'}">啊啊啊</h1>
          </template>
        </MPopover>
      </div>
      <div class="popover-demo">
        <MPopover trigger="hover" placement="left-end" >
          <MButton>left-end</MButton>
          <template #popover >
            <h1 :style="{color:'hotpink'}">啊啊啊</h1>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="right-end">
          <MButton>right-end</MButton>
          <template #popover >
            <h1 :style="{color:'hotpink'}">啊啊啊</h1>
          </template>
        </MPopover>
      </div>
      <div class="popover-demo">
        <MPopover trigger="hover" placement="bottom-start" >
          <MButton>bottom-start</MButton>
          <template #popover >
            <h1 :style="{color:'hotpink'}">啊啊啊</h1>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="bottom" >
          <MButton>bottom</MButton>
          <template #popover >
            <span :style="{color:'hotpink'}">啊啊啊</span>
          </template>
        </MPopover>
        <MPopover trigger="hover" placement="bottom-end" >
          <MButton>bottom-end</MButton>
          <template #popover >
            <h1 :style="{color:'hotpink'}">啊啊啊</h1>
          </template>
        </MPopover>
      </div>
    </div>
  </div>
</template>

<script lang="ts" >
import { defineComponent , onMounted ,ref} from "vue";
export default  defineComponent({
  components:{

  },
  setup(){


    return {


    }
  }
})

</script>

<style lang="scss">
.popover-placement-demo {
  margin: 0 auto;
  width: 400px;
  .popover-demo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

}
</style>

